<template>
	<!-- 开盒结果 -->
		<!-- <image :src="gifUrl" class="dynamicpic" ></image> -->
		<DongHua v-if="isShowdynamicpic" :list="dhGoods" @close="jump" />
		<!-- <DongHua  v-if="isShowdynamicpic"/> -->
		<view v-else>
			<view class="back" @click="back()">
				<image src="/static/images/blindbox/back_h.png"></image>
			</view>
			<view v-if="cjType=='cj'">
				<view class="play" @tap.stop v-if="(open_method == 2||open_method == 10||open_method == 3)">
					<view class="play_text">恭喜获得</view>
					<view class="play_five">
						<view class="play_pics" v-for="(item,e) in extractionResults" :key="e">
							<view class="play_pics_image"
								:class="item.type=='稀有'?'xiyoubd':item.type=='史诗'?'shishibd':item.type=='传说'?'chuanshuobd':'putongbd'">
								<image :src="item.cover_image" class="play_pics_image_img"></image>
							</view>
							<view class="play_pics_value">
								<text class="play_pics_value_tag"
									:class="item.type=='稀有'?'xiyou':item.type=='史诗'?'shishi':item.type=='传说'?'chuanshuo':'putong'">{{item.type}}款</text>
								<view class="play_pics_value_price">￥{{parseInt(item.goods_price)}}</view>
							</view>
							<view class="play_pics_title">{{item.goods_name}}</view>
						</view>
						<view class="play_fragments">
							<view class="play_fragments_item" v-for="(item,f) in extractionResults" :key="f">
								<image :src="item.s_goods.s_image" class="play_fragments_item_img"
									v-if="item.s_goods != ''"></image>
								<view class="play_fragments_item_text" v-if="item.s_goods != ''">
									{{item.s_goods.goods_name}} {{item.s_goods.s_id}}号碎片
								</view>
								<text style="color: #FF3E00" v-if="item.s_goods != ''">x1</text>
							</view>
						</view>
					</view>
					<view class="play_btn1" @click="continueGet()">再来{{open_method==2?5:open_method}}次</view>
					<navigator class="play_btn2" url="/pages/package/package">不喜欢，前往回收</navigator>
					<view class="play_tip">抽出不喜欢的商品，可前往背包中进行“回收”</view>
				</view>
				<view class="play" @tap.stop v-else>
					<view class="play_text">恭喜获得</view>
					<view class="play_pic"
						:class="extractionResults[0].type=='稀有'?'xiyoubd':extractionResults[0].type=='史诗'?'shishibd':extractionResults[0].type=='传说'?'chuanshuobd':'putongbd'">
						<image :src="extractionResults[0].cover_image" class="play_pic_img"></image>
					</view>
					<view class="play_value">
						<text class="play_value_tag"
							:class="extractionResults[0].type=='稀有'?'xiyou':extractionResults[0].type=='史诗'?'shishi':extractionResults[0].type=='传说'?'chuanshuo':'putong'">{{extractionResults[0].type}}款</text>
						<view class="play_value_price">￥{{extractionResults[0].goods_price}}</view>
					</view>
					<view class="play_title">{{extractionResults[0].goods_name}}</view>
					<view class="play_fragment" v-if="extractionResults[0].s_goods != ''">
						<image :src="extractionResults[0].s_goods.s_image" class="play_fragment_img"></image>
						{{extractionResults[0].s_goods.goods_name}}
						{{extractionResults[0].s_goods.s_id}}号碎片<text>x1</text>
					</view>
					<view class="play_btn1" @click="continueGet()">再来一次</view>
					<view class="play_btn2" @click="repumping()"
						v-if="againcouponList.length>0 && extractionResults[0].can_again == 1">重抽一次</view>
					<navigator class="play_btn2" url="/pages/package/package" v-else>不喜欢，前往回收</navigator>
					<view class="play_tip">抽出不喜欢的商品，可前往背包中进行“回收”</view>
				</view>
			</view>
			<view v-else>

				<!-- 试玩 -->
				<view class="play" @tap.stop v-if="open_method == 3">
					<view class="play_text">恭喜获得</view>
					<view class="play_pic"
						:class="tryonceInfo.type=='稀有'?'xiyoubd':tryonceInfo.type=='史诗'?'shishibd':tryonceInfo.type=='传说'?'chuanshuobd':'putongbd'">
						<image :src="tryonceInfo.cover_image" class="play_pic_img"></image>
					</view>
					<view class="play_value">
						<text class="play_value_tag"
							:class="tryonceInfo.type=='稀有'?'xiyou':tryonceInfo.type=='史诗'?'shishi':tryonceInfo.type=='传说'?'chuanshuo':'putong'">{{tryonceInfo.type}}款</text>
						<view class="play_value_price">￥{{tryonceInfo.goods_price}}</view>
					</view>
					<view class="play_title">{{tryonceInfo.goods_name}}</view>
					<view class="play_fragment" v-if="tryonceInfo.s_goods != ''">
						<image :src="tryonceInfo.s_goods.s_image" class="play_fragment_img"></image>
						{{tryonceInfo.s_goods.goods_name}} {{tryonceInfo.s_goods.s_id}}号碎片<text>x1</text>
					</view>
					<view class="play_btn1" @click="continueGet()">直接来把真的</view>
					<view class="play_tip">注：本页面只作为中奖体验效果展示，非实际中奖！</view>
				</view>
				<!-- 五连抽 -->
				<view class="play" @tap.stop v-else-if="(open_method == 2)">
					<view class="play_text">恭喜获得</view>
					<view class="play_five">
						<view class="play_pics" v-for="(item,e) in extractionResults" :key="e">
							<view class="play_pics_image"
								:class="item.type=='稀有'?'xiyoubd':item.type=='史诗'?'shishibd':item.type=='传说'?'chuanshuobd':'putongbd'">
								<image :src="item.cover_image" class="play_pics_image_img"></image>
							</view>
							<view class="play_pics_value">
								<text class="play_pics_value_tag"
									:class="item.type=='稀有'?'xiyou':item.type=='史诗'?'shishi':item.type=='传说'?'chuanshuo':'putong'">{{item.type}}款</text>
								<view class="play_pics_value_price">￥{{parseInt(item.goods_price)}}</view>
							</view>
							<view class="play_pics_title">{{item.goods_name}}</view>
						</view>
						<view class="play_fragments">
							<view class="play_fragments_item" v-for="(item,f) in extractionResults" :key="f">
								<image :src="item.s_goods.s_image" class="play_fragments_item_img"
									v-if="item.s_goods != ''"></image>
								<view class="play_fragments_item_text" v-if="item.s_goods != ''">
									{{item.s_goods.goods_name}} {{item.s_goods.s_id}}号碎片
								</view>
								<text style="color: #FF3E00" v-if="item.s_goods != ''">x1</text>
							</view>
						</view>
					</view>
					<view class="play_btn1" @click="continueGet()">再来五次</view>
					<navigator class="play_btn2" url="/pages/package/package">不喜欢，前往回收</navigator>
					<view class="play_tip">抽出不喜欢的商品，可前往背包中进行“回收”</view>
				</view>
				<!-- 单抽 -->
				<view class="play" @tap.stop v-else>
					<view class="play_text">恭喜获得</view>
					<view class="play_pic"
						:class="extractionResults[0].type=='稀有'?'xiyoubd':extractionResults[0].type=='史诗'?'shishibd':extractionResults[0].type=='传说'?'chuanshuobd':'putongbd'">
						<image :src="extractionResults[0].cover_image" class="play_pic_img"></image>
					</view>
					<view class="play_value">
						<text class="play_value_tag"
							:class="extractionResults[0].type=='稀有'?'xiyou':extractionResults[0].type=='史诗'?'shishi':extractionResults[0].type=='传说'?'chuanshuo':'putong'">{{extractionResults[0].type}}款</text>
						<view class="play_value_price">￥{{extractionResults[0].goods_price}}</view>
					</view>
					<view class="play_title">{{extractionResults[0].goods_name}}</view>
					<view class="play_fragment" v-if="extractionResults[0].s_goods != ''">
						<image :src="extractionResults[0].s_goods.s_image" class="play_fragment_img"></image>
						{{extractionResults[0].s_goods.goods_name}}
						{{extractionResults[0].s_goods.s_id}}号碎片<text>x1</text>
					</view>
					<view class="play_btn1" @click="continueGet()">再来一次</view>
					<view class="play_btn2" @click="repumping()"
						v-if="againcouponList.length>0 && extractionResults[0].can_again == 1">重抽一次</view>
					<navigator class="play_btn2" url="/pages/package/package" v-else>不喜欢，前往回收</navigator>
					<view class="play_tip">抽出不喜欢的商品，可前往背包中进行“回收”</view>
				</view>
			</view>
		</view>
	</view>
		
</template>

<script>
	const bgmMusicRes = uni.createInnerAudioContext()
	import DongHua from './components/donghua.vue'
	export default {
		components: {
			DongHua
		},
		data() {
			return {
				activity_id: '', //盲盒id
				order_id: '', //订单id
				price: '', //价格
				type: 'buy', //是否是重抽
				open_method: 1, //当前抽取的次数类型 1单抽 2五连抽 3试玩
				tryonceInfo: {
					goods_id: '',
					goods_name: '',
					goods_price: '',
					cover_image: '',
					s_goods: {
						goods_name: '',
						s_id: '',
						s_image: ''
					}
				}, //试玩结果	
				extractionResults: [{
					goods_id: '',
					goods_name: '',
					goods_price: '',
					cover_image: '',
					s_goods: {
						goods_name: '',
						s_id: '',
						s_image: ''
					},
					type: ''
				}], //抽取盲盒结果
				againcouponList: [], //可用的重抽卡列表
				gifUrl: '/static/images/dynamicpic.gif', //开盒动画
				isShowdynamicpic: false,
				cjType: "",
				dhGoods: [],
				loading: false,
				resMusic: false
			}
		},
		onLoad(options) {

			this.activity_id = options.activity_id;

			this.order_id = options.order_id;
			this.price = options.price;
			this.open_method = options.open_method;
			this.cjType = options.cjType
			if (options.cjType === 'cj') {
				if (options.type && options.type == 'repumping') {
					this.type = options.type;
					console.log(options);
				}
				this.getIndexMyagaincoupon();
			} else {

				if (this.open_method == 3) {
					this.getDemo();
				} else {
					if (options.type && options.type == 'repumping') {
						this.type = options.type;
						console.log(options);
					}
					this.getIndexMyagaincoupon();
				}
			}
			this.getMoreGood()

		},
		onShow() {
			this.loading = true
			this.resMusic = false
		},
		methods: {
			jump() {
				this.resMusic = true
				this.isShowdynamicpic = false
				this.$store.commit('playMusic', '/static/choujiangjieguo.mp3')
				// bgmMusicRes.autoplay = true; //自动播放
				// bgmMusicRes.loop = false; //循环播放
				// bgmMusicRes.src = ; //背景音乐地址
				// bgmMusicRes.volume = .5; //音量
			},
			getMoreGood() {
				this.$api
					.indexMoregoods({
						activity_id: this.activity_id,
						type: 0
					})
					.then(res => {
						console.log(this,'thisssss');
						this.isShowdynamicpic = true
						this.loading = false
						if (res.length > 0) {
							if (res.length > 16) {
								this.dhGoods = this.shuffle(res.slice(0, 16))
							} else {
								const data = []
								const count = Math.ceil(16 / res.length)
								for (let i = 0; i < count; i++) {
									data.push(...res)
								}
								this.dhGoods = this.shuffle(data.slice(0, 16))
							}
						}
						setTimeout(() => {
							this.isShowdynamicpic = false;
							if (this.resMusic) return
							this.jump()
						}, 7000)
					});
			},
			shuffle(arr) {
				let length = arr.length,
					randomIndex,
					temp;
				while (length) {
					randomIndex = Math.floor(Math.random() * (length--));
					temp = arr[randomIndex];
					arr[randomIndex] = arr[length];
					arr[length] = temp
				}
				return arr;
			},
			back() {
				if (!uni.getStorageSync('token')) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
					// uni.navigateTo({
					// 	url: '/pages/index/extractionBlindbox'
					// })
				}
			},
			//获取试玩结果
			getDemo() {
				this.$api.indexTryonce({
					activity_id: this.activity_id
				}).then(res => {
					this.tryonceInfo = res;
				})
			},
			//获取抽取盲盒结果
			getIndexExtractboxc() {
				this.$api.indexExtractboxc({
					activity_id: this.activity_id,
					order_id: this.order_id,
				}).then(res => {
					this.extractionResults = res;
					console.log(this.extractionResults);
					this.getPaidorder();
				})
			},
			//获取已付款待获取开盒结果的订单
			getPaidorder() {
				this.$api.paidorder().then(result => {
					console.log("已付款待获取开盒结果的订单: ", result);
					if (result.all_num > 0) {
						uni.showModal({
							title: '温馨提示',
							content: '您有已付款的盲盒未获取开盒结果，是否前往获取？',
							confirmText: '获取',
							success: (r) => {
								if (r.confirm) {
									uni.navigateTo({
										url: '/pages/blindbox/blindbox_result?' + this.$url
											.urlEncode({
												activity_id: result.orders.activity_id,
												price: result.orders.pay,
												order_id: result.orders.order_id,
												open_method: result.orders.open_method
											})
									})
								}
							}
						})
					}
				})
			},
			//获取可用的盲盒重抽卡
			getIndexMyagaincoupon() {
				this.$api.indexMyagaincoupon({
					activity_id: this.activity_id,
				}).then(res => {
					this.againcouponList = res;
					if (this.type == 'repumping') {
						this.repumping();
					} else {
						this.getIndexExtractboxc();
					}
				})
			},
			//再来一次-再来五次
			continueGet() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				} else {
					uni.redirectTo({
						url: '/pages/blindbox/confirmPay?' + this.$url.urlEncode({
							activity_id: this.activity_id,
							price: this.price,
							open_method: this.open_method
						})
					})
				}
			},
			//重抽一次-跳转
			toRepumping() {
				uni.redirectTo({
					url: '/pages/blindbox/blindbox_open?' + this.$url.urlEncode({
						activity_id: this.activity_id,
						price: this.price,
						order_id: this.order_id,
						open_method: this.open_method,
						type: 'repumping'
					})
				})
			},
			//重抽一次-获取结果
			repumping() {
				this.gifUrl = `/static/images/dynamicpic.gif?${new Date().getTime()}`
				this.isShowdynamicpic = true;
				this.$api.indexAgainextract({
					activity_id: this.activity_id,
					order_id: this.order_id,
					coupon_id: this.againcouponList[0].id
				}).then(res => {
					this.extractionResults = res;
					this.type = 'buy';
					this.$api.indexMyagaincoupon({
						activity_id: this.activity_id,
					}).then(res => {
						this.againcouponList = res;
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url();
		background-size: cover;
		padding-top: 80rpx;
		padding-bottom: 30rpx;
		overflow-y: auto;
		height: 100vh;
	}

	.back {
		padding: 26rpx 0 0 50rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.dynamicpic {
		@include img;
		position: fixed;
		z-index: 99999;
		top: 0;
		left: 0;
	}

	.play {
		width: 100%;
		text-align: center;

		&_text {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #000000;
		}

		&_pic {
			width: 360rpx;
			height: 360rpx;
			border-radius: 15rpx;
			border: 4rpx solid #492AFF;
			margin: 50rpx auto;
			position: relative;

			&_img {
				@include img;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		&_value {
			@include column-center;
			margin-top: 50rpx;

			&_tag {
				width: 96rpx;
				height: 36rpx;
				background: linear-gradient(180deg, #FF7900 0%, #FE1F08 100%);
				border-radius: 18rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				@include center;
			}

			&_price {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF3E00;
				margin-top: 14rpx;
			}
		}

		&_fragment {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			@include center;
			margin-top: 48rpx;

			&_img {
				width: 34rpx;
				height: 44rpx;
				margin-right: 22rpx;
			}

			text {
				color: #FF3E00;
				margin-left: 12rpx;
			}
		}

		.play_five {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}

		.play_pics {
			@include column-center;
			margin-right: 24rpx;
			margin-top: 48rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}

			&_image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 15rpx;
				border: 4rpx solid #492AFF;
				position: relative;

				&_img {
					@include img;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 99999;
				}

				text {
					color: #FF3E00;
					margin-left: 12rpx;
				}
			}

			&_title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-top: 12rpx;
				width: 200rpx;
				@include one;
			}

			&_value {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				@include column-center;
				margin-top: 20rpx;

				&_tag {
					width: 100rpx;
					height: 40rpx;
					border-radius: 20rpx;
					@include center;
					margin-right: 5rpx;
				}

				&_price {
					width: 140rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF3E00;
					@include one;
					margin-top: 14rpx;
				}
			}
		}

		&_fragments {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 30rpx;
			width: 630rpx;

			&_item {
				@include center;
				margin-bottom: 20rpx;

				&_img {
					width: 34rpx;
					height: 44rpx;
					margin-right: 6rpx;
				}

				&_text {
					width: 230rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					@include one;
				}
			}
		}

		&_title {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 12rpx;
		}

		&_btn1 {
			width: 480rpx;
			height: 76rpx;
			background: linear-gradient(180deg, #FFBE00 0%, #FF1200 100%);
			border-radius: 36rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			@include center;
			margin: 48rpx auto 0;
		}

		&_btn2 {
			width: 480rpx;
			height: 76rpx;
			background: linear-gradient(180deg, #00E8FF 0%, #985FFF 100%);
			border-radius: 36rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			@include center;
			margin: 28rpx auto 0;
		}

		&_tip {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 50rpx;
		}
	}

	.chuanshuo {
		background: linear-gradient(180deg, #FFBF00 0%, #FF7700 100%) !important;
	}

	.shishi {
		background: linear-gradient(180deg, #FF7900 0%, #FE1F08 100%) !important;
	}

	.xiyou {
		background: linear-gradient(180deg, #B557F7 0%, #742AFF 100%) !important;
	}

	.putong {
		background: linear-gradient(360deg, #492AFF 0%, #02E6FF 100%) !important;
	}

	.chuanshuobd {
		border: 4rpx solid #FFBF00 !important;
	}

	.shishibd {
		border: 4rpx solid #FF7900 !important;
	}

	.xiyoubd {
		border: 4rpx solid #B557F7 !important;
	}

	.putongbd {
		border: 4rpx solid #492AFF !important;
	}
</style>
